import React from 'react';
import {Text, TouchableOpacity} from 'react-native';
import {useSafeState} from 'ahooks';
import {round} from 'lodash';
import * as PageSvg from './svg';
import {IconColor} from '../../../../config';

export default ({iconKey = '', onChangeIconKey = () => {}}) => {
  if (!iconKey) {
    return <Text>!iconKey</Text>;
  }
  if (!PageSvg[iconKey]) {
    return <Text>!PageSvg</Text>;
  }

  if (iconKey === 'List') {
    return (
      <TouchableOpacity
        onPress={() => {
          onChangeIconKey('Grid');
        }}>
        <PageSvg.List width={28} height={28} color={IconColor} />
      </TouchableOpacity>
    );
  }

  if (iconKey === 'Grid') {
    return (
      <TouchableOpacity
        onPress={() => {
          onChangeIconKey('List');
        }}>
        <PageSvg.Grid width={24} height={24} color={IconColor} />
      </TouchableOpacity>
    );
  }

  return <></>;
};
